<template>
<div>
  <div class="weui-cells__title">
    店铺信息
    <div class="xiugai"  v-if="isDisabled" @click="revise">
      <img src="../../../../static/images/shiming/pen.png" alt="">修改
    </div>
  </div>

  <div class="weui-cells weui-cells_form">
    <div class="weui-cell">
      <div class="weui-cell__hd"><label class="weui-label">店铺名称</label></div>
      <div class="weui-cell__bd">
        <input class="weui-input" type="text" placeholder="请填写店铺名称" :disabled="isDisabled" v-model="shopName"/>
      </div>
    </div>

    <div class="weui-cell shop-img">
      <div class="weui-cell__hd"><label class="weui-label">店铺封面图片</label></div>
      <div class="weui-cell__bd">
        <!--店铺图片-->
        <croppa v-model="shopReviseImg"
                :disabled="isDisabled"
                :width="100"
                :height="100"
                placeholder=""
                ref="shopReviseImg"
                @new-image-drawn="uploadImg"
        >
          <img slot="placeholder" crossorigin="anonymous" :src="resUrl+shopImg">
        </croppa>
      </div>
    </div>

  </div>

  <div class="btn-box" v-show="isDisabled">
    <button class="weui-btn weui-btn_warn" @click="goBack">确认</button>
  </div>
  <div class="btn-box xiugai-btn" v-show="!isDisabled">
    <button class="weui-btn weui-btn_plain-default" @click="cancel">取消</button>
    <button class="weui-btn weui-btn_warn" @click="modifyShopInfo">提交审核</button>
  </div>

</div>
</template>

<script>
  import {ipconfig} from "../../../assets/js/ipconfig";
  import {getStatusMapByKey,getUser,setUser} from "../../../assets/js/tools";
  import {getApproveByUser,uploadMedia,shopAuditting,getUserMsg} from "../../../assets/js/getData";
  export default {
    name: "shopRevise",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        isDisabled:true,

        shopName:null,
        shopImg:null,
        smImageUrl:null,
        mxImageUrl:null,

        urlType:null,
        user:null,

        shopReviseImg:{},
      }
    },
    created(){
      let eStorageUrl = getStatusMapByKey('eStorageUrl');
      this.urlType = eStorageUrl['shopImages'].val;
      this.user = getUser();

      this.getShopInfo();
    },
    mounted(){
      this.$refs.shopReviseImg.$refs.wrapper.onclick = () => {
        let arr = document.getElementsByTagName('input');
        for(let i=0; i<arr.length;i++){
          arr[i].blur();
        }
      };
    },
    methods:{
      //点击修改
      revise(){
        this.isDisabled = false;
      },
      //取消修改
      cancel(){
        this.isDisabled = true;
        this.shopReviseImg.remove();
        this.getShopInfo();
      },
      //提交审核
      modifyShopInfo(){
        //店铺认证提交
        let params = {
          name:this.shopName,
          smImageUrl:this.smImageUrl,
          mxImageUrl:this.mxImageUrl
        };
        shopAuditting(params).then(res => {
          if(res.data.reqResult.code > 0){
            getUserMsg().then(res => {
              if(res.data.reqResult.code>0){
                this.isDisabled = true;
                this.getShopInfo();
                let data = res.data.data.user;
                this.user.shopAudittingStatus = data.shopAudittingStatus;
                setUser(this.user);
                this.$router.replace({name:'shopAudit'});
              }else {
                Toast(res.data.reqResult.msg);
              }
            });
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      //上传图片
      uploadImg(){
        if (!this.shopReviseImg.hasImage()) {
          alert('no image to upload');
          return;
        }
        this.shopReviseImg.generateBlob((blob)=> {
          let formdata = new FormData();
          formdata.append('files', blob);
          formdata.append('type', this.urlType);
          formdata.append('needSmImg',1);
          uploadMedia(formdata).then(res => {
            if(res.data.reqResult.code > 0){
              let data = res.data.data;
              this.smImageUrl = data[0].smImageUrl;
              this.mxImageUrl = data[0].mxImageUrl;
            }else {
              Toast(res.data.reqResult.msg);
            }
          });
        })
      },
      //获取店铺认证信息
      getShopInfo(){
        getApproveByUser().then(res => {
          if(res.data.reqResult.code>0){
            let data = res.data.data;
            this.shopName = data.name;
            this.shopImg = data.smImageUrl;
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      },
      goBack(){
        this.$router.go(-1)
      },
    }

  }
</script>

<style scoped>
  .weui-cells__title{
    display: flex;
    justify-content: space-between;
  }
  .xiugai{
    color: #C50000;
    font-size: 0.7rem;
  }
  .xiugai img{
    width: 0.7rem;
  }
  .shop-img{
    padding-bottom: 1.25rem;
  }
  .shop-img .weui-cell__hd{
    align-self: flex-start;
  }
  .uploader__input-box{
    position: relative;
    width: 5rem;
  }
  .uploader__input-box img{
    width: 100%;
  }
  .weui-cell__bd{
    width: 5rem;
    flex: none;
  }
  .weui-cells_form .weui-cell__ft{
    font-size: 0.7rem;
  }
  .btn-box{
    padding: 0 0.65rem;
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    right: 0;
  }
  .xiugai-btn{
    display: flex;
    justify-content: space-between;
  }
  .xiugai-btn .weui-btn_plain-default{
    line-height: 2rem;
    font-size: 0.8rem;
    color: #666666;
    border-radius: 3px;
    width: 5.25rem;
  }
  .xiugai-btn .weui-btn_warn{
    width: 11.4rem;
  }
  .weui-btn + .weui-btn {
    margin-top: 0;
  }
</style>
